import { Card } from 'antd';
import React, { useState, useEffect } from 'react';
import { useIntl, FormattedMessage } from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import { Line } from '@ant-design/charts';

import { getChartsData } from '@/services';

const DataShow = () => {
  const intl = useIntl();
  const [list, setList] = useState([]);
  let timer = null;
  const queryChartsData = async () => {
    const res = await getChartsData();
    if (res && res.data) {
      setList(res.data);
    }
  };

  useEffect(() => {
    queryChartsData();
  }, []);

  useEffect(() => {
    timer = setInterval(() => {
      queryChartsData();
    }, 5000);
    return () => {
      clearInterval(timer);
    };
  });

  const Config = {
    height: 300,
    xField: 'createTime',
    yField: 'inspectionValue',
    seriesField: 'inspectionName',
    xAxis: {
      label: {
        offset: 20,
      },
    },
    // xAxis: { tickCount: 5 },
    // slider: {
    //   start: 0.1,
    //   end: 0.5,
    // },
    // padding: 30,
  };
  return (
    <PageContainer>
      {list.map((item, index) => (
        <Card
          key={index}
          style={{ marginTop: 20 }}
          title={
            <>
              物料名称：{item.materialName}
              <span style={{ marginLeft: 40 }}>检测点：{item.location}</span>
            </>
          }
        >
          {item.data.length ? (
            <Line data={item.data.length ? item.data : []} {...Config} />
          ) : (
            <div
              style={{
                // height: 300,
                // display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              暂无数据
            </div>
          )}
        </Card>
      ))}
    </PageContainer>
  );
};

export default DataShow;
